<template>
	<view class="news-detail-view">
		<page-head :transparent='false'>
			<slot slot="title">{{title.length>10?title.substr(0,10)+'...':title}}</slot>
			<slot slot="right"><span /></slot>
		</page-head>
		<view class="news-top-img">
			<image :src="headpic" mode="scaleToFill"></image>
			<view class="news-main-title">
				<text>{{title}}</text>
			</view>
		</view>
		<view style="height: 10px;"></view>

		<view class="news-detail-source">
			<text>{{source}}</text>
			<text>{{pub_time}}</text>
		</view>

		<view style="height: 10px;"></view>
		<view class="news-main-summary">
			概要：
			<text>{{summary}}</text>
		</view>
		<view style="height: 10px;"></view>
		<view class="news-content">
			{{content}}
		</view>

		<view style="height: 80px;"></view>
		<view class="news-detail-bottom">
			<view class="news-detail-row">
				<view class="news-detail" @click="userComment">
					<image src="../../static/img/news/pinglun.png" mode="scaleToFill"></image>
				</view>
				<view class="news-detail" @click="pointPraise()">
					<image :src="unDianZan" mode="scaleToFill" v-if="dian === 0"></image>
					<image :src="dianZan" mode="scaleToFill" v-else></image>
				</view>
				<view class="news-detail">
					<image src="../../static/img/news/more.png" mode="scaleToFill"></image>
				</view>
			</view>
		</view>

		<view class="news-detail-comment" v-if="userClickCom">
			<view class="comment-row">
				<textarea placeholder="友善的发言更受欢迎哦~,500字以内" v-model="comments" maxlength="500" />
				</view>
			<view class="comment-send">
				<view class="send-row">
					<text class="sendto-quit" @click="quitComment">取消</text>
					<text class="sendto-out" @click="sentOut">发送</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>	
		import unDianZan from '../../static/img/news/unselect-dianzan.png';
		import dianZan from '../../static/img/news/select-dianzan.png'
	export default {
		data() {
			return {
				headpic: '',
				summary: '',
				content: '',
				source: '',
				pub_time: '',
				unDianZan,
				dianZan,
				comments:'',
				userClickCom:false,
				title: '新闻资讯',
				dian: 0,
			}
		},
		onLoad(event) {
			let id = event.id;
			this.genDetail(id);
		},
		methods: {
			sentOut(){
				
			},
			pointPraise() {
				if (this.dian === 0) {
					this.dian = 1;
				} else {
					this.dian = 0;
				}
			},
			userComment(){
				this.userClickCom = true;
			},
			quitComment(){
				this.userClickCom = false;
			},
			async genDetail(id) {
				let res = await this.$request.get('/coupon-product/temp/newsDetail', {
					data: {
						aid: id
					}
				});
				if (res.data.code == 200) {
					let datas = res.data.data;
					this.headpic = datas.headpic;
					this.summary = datas.summary;
					this.title = datas.title;
					this.content = datas.content.replace(/<(?!\/\b\/)[^>]+>/ig, '');
					this.source = datas.source;
					Date.prototype.toLocaleString = function() {
						return this.getFullYear() + '/' + (this.getMonth() + 1) + '/' + this.getDate();
					};
					this.pub_time = new Date(datas.pub_time*1000);
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.news-detail-view {
		width: 100%;
		display: flex;
		flex-direction: column;

		.news-top-img {
			width: 100%;
			height: 500px;
			image {
				width: 100%;
				height: 100%;
			}

			.news-main-title {
				width: 100%;
				padding-left: 10px;
				font-size: 32px;
				color: white;
				background: rgba(0, 0, 0, 0.4);
				opacity: 0.6;
				position: absolute;
				top: 38%;
			}
		}

		.news-main-summary {
			width: 96%;
			margin-left: 2%;
			color: #ccc;
			font-size: 24px;
		}
		
		.news-detail-source{
			width: 96%;
			margin-left: 2%;
			display: flex;
			justify-content: space-between;			
				color: #ccc;
		}

		.news-content {
			width: 96%;
			margin-left: 2%;
			font-size: 28px;
		}
		
		.news-detail-bottom {
			width: 100%;
			height: 80px;
			position: fixed;
			bottom: 0;
			overflow: scroll;
			background-color: white;
		
			.news-detail-row {
				display: flex;
				flex-direction: row;
				justify-content: flex-end;
		
				.news-detail {
					width: 160px;
					height: 80px;
					display: flex;
					justify-content: center;
					align-items: center;
		
					image {
						width: 40px;
						height: 40px;
					}
				}
			}
		}
		
		.news-detail-comment{
			width: 100%;
			height: 600px;
			position: fixed;
			bottom: 0px;
			background-color: #EEEEEE;
			display: flex;
			flex-direction: column;
			.comment-row{
				width: 100%;
				height: 540px;
				textarea{
					width: 100%;
					height: 100%;
				}
				border-block-end: #CCCCCC solid 1upx;
			}
			.comment-send{
				width: 100%;
				height: 60px;
				.send-row{
					width: 98%;
					height: 60upx;
					font-size: 24px;
					display: flex;
					justify-content: space-around;
					align-items: center;
					.sendto-quit{
						width: 48%;
						display: flex;
						align-items: center;
					}
					.sendto-out{
						width: 48%;
						display: flex;
						align-items: center;
						justify-content: flex-end;
						color: #0000FF;
					}
				}
			}
		}
	}
</style>
